<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script><script type="text/javascript" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js"></script><link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css" /><script type="text/javascript" src="https://unpkg.com/javascript-obfuscator@4.0.2/dist/index.browser.js"></script>
    <meta name="author" content="lijinbo" />
    <title>218-js代码混淆</title>
    <style></style>
  </head>

  <body>
    <div id="app">
      <p>
        参考文章：
        <a href="https://blog.csdn.net/Crazy__Hope/article/details/103717469" target="_bank">js混淆与反混淆</a>
      </p>
      <el-form label-width="120px">
        <el-form-item label="原始代码">
          <el-button type="primary" @click="handle" style="margin-bottom: 16px">混淆</el-button>
          <el-input type="textarea" :rows="10" v-model="orgCode"></el-input>
        </el-form-item>
        <el-form-item label="混淆后代码">
          <el-input type="textarea" :rows="15" :value="distCode"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            orgCode: '',
            distCode: ''
          }
        },
        created() {},
        methods: {
          handle() {
            if (!this.orgCode) return this.$message.error('请输入代码')
            const obfuscationResult = JavaScriptObfuscator.obfuscate(this.orgCode)
            this.distCode = obfuscationResult.getObfuscatedCode()
          }
        }
      })
    </script>
  </body>
</html>
